<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>展示学生列表--Ajax(使用jQuery)</title>
    <script src="/webjars/jquery/3.6.0/dist/jquery.min.js"></script>
    <link rel="stylesheet" href="/webjars/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="/webjars/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<style>
    .table{
        text-align: center;
    }
</style>
<body>
    <div class="container">
<!--     快捷键 <bs3-panel:primary>-->
        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title">学生列表(Jquery + Ajax)</h3>
            </div>
<!--     表格 table.table>tr*2>td*7-->
            <table class="table">
                <tr>
                    <td>学号</td>
                    <td>姓名</td>
                    <td>性别</td>
                    <td>年龄</td>
                    <td>住址</td>
                    <td>所在班级</td>
                    <td>操作</td>
                </tr>
                <tbody id="tb"></tbody>
            </table>
<!-- panel-body改为panel-footer text-right-->
            <div class="panel-footer text-right">
                小缘教育2021
            </div>
        </div>
    </div>
</body>
</html>
<script>
<!--    相当于window.onload-->
    $(function () {
        // 查询所有学生
        findAllStudents();
    })
    function findAllStudents() {
        // $.ajax({
        //     url:"",
        //     type:"",
        //     data:{},
        //     dataType:"json",
        //     success:function (data) {
        //
        //     }
        // })
        $.post("/student?cmd=list",function (data) {
            console.log("data:",data);
            //    1.1定义存放学生信息的字符串
            let str = "";
            data.forEach(st=>{
                str += "<tr>"
                str += "<td>" + st.sid + "</td>"
                str += "<td>" + st.sname + "</td>"
                str += "<td>" + st.sex + "</td>"
                str += "<td>" + st.age + "</td>"
                str += "<td>" + st.addr + "</td>"
                str += "<td>" + st.cid + "</td>"
                str += "<td>"
                str += "<a href='#' class='btn btn-success btn-sm'>修改</a> "
                str += "<a href='#' class='btn btn-danger btn-sm'>删除</a>"
                str += "</td>"
                str += "</tr>"
            })
            //    为tb层添加内容
            //    document.getElementById('tb').innerHTML=str;
            $("#tb").html(str);
        },"json");
    }
</script>